<script setup>
import TopicExploreListItem from '@/views/TopicExplore/TopicExploreListItem.vue'
import { useUserTopicListQuery } from '@/composables/useUserInfoQuery'
import { useRoute } from 'vue-router'

const route = useRoute()

const { data, fetchNextPage, hasNextPage, isFetching, isLoading } = useUserTopicListQuery(route.params.uid)

const flattenedData = computed(() => data.value?.pages.flatMap((page) => page.data) ?? [])

const loadMore = () => {
  if (isFetching.value) return
  fetchNextPage()
}
</script>

<template>
  <div
    class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 3xl:grid-cols-6 4xl:grid-cols-7 gap-6"
    v-infinite-scroll="loadMore">
    <TopicExploreListItem v-for="item in flattenedData" :item="item" />
  </div>
</template>
